import React from 'react'
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, Checkbox, TreeSelect, Space, DatePicker } from 'antd';
import('./UserSearch.less')
const { Option } = Select;
const { RangePicker } = DatePicker;
export default function UserSearch(props: any) {
    const { deptData, getData } = props
    interface params {
        username?: string
        deptId?: string
        createTimeFrom?: string
        createTimeTo?: string
    }
    const onFinish = (fieldsValue: any) => {
        // getData(values)
        //解构表单对象中的每一项
        const { username, deptId, rangePicker } = fieldsValue;
        //实际提交后端的参数对象
        const params: params = {}
        if (username) params.username = username
        if (deptId) params.deptId = deptId
        if (rangePicker) {
            const rangeValue = fieldsValue['rangePicker'];
            params.createTimeFrom = rangeValue[0].format('YYYY-MM-DD')
            params.createTimeTo = rangeValue[1].format('YYYY-MM-DD')
        }
        getData(params)
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const [form] = Form.useForm();
    const [isUnfold, setIsUnfold] = React.useState(false)
    React.useEffect(() => {
        getData()
    }, [])
    return (
        <div>
            <Form
                onFinish={onFinish}
                form={form}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                className='SearchForm'
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    style={{marginRight:'50px'}}
                >
                    <Input />
                </Form.Item>

                <Form.Item label="部门"
                    name={'deptId'}>
                    <TreeSelect
                        className='tree'
                        treeData={deptData}
                        allowClear
                        
                    />
                </Form.Item>
                {
                    isUnfold ?
                        <Form.Item label="创建时间"
                        name={'rangePicker'}
                        className='flex1'
                        style={{marginRight:'350px'}}
                    >

                        <RangePicker />

                        </Form.Item>
                       
                        : null
                }


                <Form.Item
                    style={{marginLeft:'0px'}}
                >
                    <div
                    style={{marginLeft:'100px'}}
                    >
                    <Button type="primary" htmlType="submit" style={{ marginRight: '10px' }}>查询</Button>
                    <Button type="primary" onClick={() => form.resetFields()}>重置</Button>
                    <Button type="link" onClick={() => setIsUnfold(!isUnfold)}>
                        {
                            isUnfold ? <>收起<UpOutlined /></> : <>展开<DownOutlined /></>
                        }
                    </Button>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}
